<template>
    <div>
      <!--导航区域-->
      <el-breadcrumb separator-class="el-icon-arrow-right" v-if="!isAdmin">
        <el-breadcrumb-item :to="{ path: '/user/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>图书管理</el-breadcrumb-item>
        <el-breadcrumb-item>图书信息</el-breadcrumb-item>
      </el-breadcrumb>
      <el-breadcrumb separator-class="el-icon-arrow-right" v-else>
        <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>图书管理</el-breadcrumb-item>
        <el-breadcrumb-item>图书信息</el-breadcrumb-item>
      </el-breadcrumb>

      <el-card>
        <el-row :gutter="20">
          <el-col :span="7">
            <el-button type="primary" @click="addBook()" size="small">图书录入</el-button>
          </el-col>
        </el-row>
        <el-table :data="bookList" style="width: 100%" border>
          <el-table-column label="书籍编号" width="180">
            <template slot-scope="scope">
              <span style="color: crimson" size="medium"><i class="el-icon-s-opportunity"></i>{{ scope.row.bookId }}</span>
            </template>
          </el-table-column>
          <el-table-column label="书名" prop="bookName" width="200">
            <template slot-scope="scope">
              <span style="color: #4A5064" size="medium"><i class="el-icon-notebook-2"></i>{{scope.row.bookName}}</span>
            </template>
          </el-table-column>
          <el-table-column label="录入时间" width="180">
            <template slot-scope="scope">
              <span style="color: #67C23A" size="medium"><i class="el-icon-time"></i>{{ scope.row.addTime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="借阅人" width="150">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.userName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="借阅时间" width="150">
            <template slot-scope="scope">
              <span style="margin-left: 10px;color: red" v-if="scope.row.borrowTime"><i class="el-icon-time"></i>{{ scope.row.borrowTime }}</span>
            </template>
          </el-table-column>
          <el-table-column  label="操作">
            <template slot-scope="scope">
              <el-button size="small" type="success" v-if="!scope.row.userName && !isDisable"
                @click="borrow(scope.row.bookId)">
                借阅
              </el-button>
              <el-button size="small" type="danger"
                         v-if="scope.row.userName !== currentUserName && scope.row.userName && !isDisable">
                不可借
              </el-button>
              <el-button size="small" type="primary" @click="returnBook(scope.row.bookId)"
                v-if="scope.row.userName === currentUserName && !isDisable">
                归还
              </el-button>
              <el-button size="small" type="danger" v-if="isDisable" @click="deleteBook(scope.row.bookId)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!--分页-->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[6,7,8,9,10]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>


      </el-card>

    </div>
</template>

<script>
    export default {
        name: "Book",
      data(){
          return{
            isAdmin: false,
            closeDialogVisible: false,
            bookList: [],
            isDisable: false,
            pageNum: 1,
            pageSize: 6,
            total: 1,
            currentUserName: '' //当前的用户名，要判断该用户与借书用户是否匹配
          }
      },
      created() {
          var userInfo = JSON.parse(window.sessionStorage.getItem('user'));
          if (userInfo.userAuthority == 2){
            this.isDisable = true;
            this.isAdmin = true;
          }
          this.currentUserName = userInfo.userName;
          this.getBookList();
      },
      methods: {
        //图书录入
        addBook(){
          this.$prompt('请录入书名', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
          }).then(async ({ value }) => {
             var fd = new FormData();
             fd.append("bookName",value);
             const {data: res} = await this.$http.post('book/addBook',fd);
             if (res.status !== 200){
               return this.$message.error(res.msg);
             }
             this.getBookList();
             return this.$message.success('已成功录入书籍：' + value);

          });

        },
        //借书
        async borrow(bookId){
          var userInfo = JSON.parse(window.sessionStorage.getItem('user'));
          //put请求
          const {data: res} = await this.$http.put(`book/borrowBook/${bookId}/${userInfo.userName}`);
          if (res.status !== 200){
            return this.$message.error(res.msg);
          }
          this.getBookList();
          return this.$message.success("已借");

        },
        //删除
        async deleteBook(bookId){
          const {data: res} = this.$http.delete(`book/deleteBook/${bookId}`);
          if (res.status !== 200){
            return this.$http.error(res.msg);
          }
          this.getBookList();
          return this.$http.success("删除成功！");
        },
        //还书
        async returnBook(bookId){
          //put请求
          const {data: res} = await this.$http.put(`book/returnBook/${bookId}`);
          if (res.status !== 200){
            return this.$message.error(res.msg);
          }
          this.getBookList();
          return this.$message.success("还书成功！");
        },
        //获取图书列表
        async getBookList(){
          var userInfo = JSON.parse(window.sessionStorage.getItem('user'));
          this.currentUserName = userInfo.userName;
          const {data: res} = await this.$http.get(`book/getBooks/${this.pageNum}/${this.pageSize}`);
          if (res.status !== 200){
            return this.$message.error(res.msg);
          }
          console.log(res);
          this.bookList = res.data.bookList;
          this.total = res.data.total;
        },
        handleSizeChange(newPageSize){
          //更新没页的条数
          this.page.pageSize = newPageSize;
          this.getBookList();
        },
        handleCurrentChange(newPage){
          //更新页码
          this.page.pageNum = newPage;
          this.getBookList();
        },

      }
    }
</script>

<style scoped>

</style>
